<template>
  <div class="portal-layout__header flex justify-between items-center">
    <div class="portal-layout__header-left">
      <a class="aui-navbar__brand-lg"
         href="javascript:;"
         style="display: flex;align-items: center;">
        <img data-v-fb5915c2=""
             :src="$ossLink+'/app/gif/logo_left.png'"
             height="28"
             alt="MSPBOTS Portal"
             style="">
        <span style="font-size: 20px;font-weight: bold;margin-left: 12px;">{{$store.state.siteWebConfig.title}}</span>
      </a>
      <!-- <template>
        <svg slot="label"
             style="color: white;cursor: pointer;margin-left:10px;"
             @click="goToHome"
             class="icon-svg aui-content--tabs-icon-nav"
             aria-hidden="true">
          <use xlink:href="#icon-home"></use>
        </svg>
      </template> -->

    </div>
    <div class="portal-layout__header-right"
         style="display: flex;align-items: center;">

    <el-tooltip class="item"
                  effect="dark"
                  content="班组成本核算"
                  placement="bottom">
        <i class="el-icon-s-order"
           style="color:#ffffff;font-size: 18px;margin-right: 10px;"
           @click="$emit('emitWay', { type: 9 })"></i>
    </el-tooltip>
      <el-tooltip class="item"
                  effect="dark"
                  content="备料提报"
                  placement="bottom">
        <i class="el-icon-receiving"
           style="color:#ffffff;font-size: 18px;margin-right: 10px;"
           @click="$emit('emitWay', { type: 7 })"></i>
      </el-tooltip>
      <!-- <el-tooltip class="item"
                  effect="dark"
                  content="缺料追踪"
                  placement="bottom">
        <i class="el-icon-s-order"
           style="color:#ffffff;font-size: 18px;margin-right: 10px;"
           @click="$emit('emitWay', { type: 5 })"></i>
      </el-tooltip> -->

        <!-- <el-tooltip class="item"
                  effect="dark"
                  content="工具信息反馈"
                  placement="bottom">
        <i class="el-icon-receiving"
           style="color:#ffffff;font-size: 18px;margin-right: 10px;"
           @click="$emit('emitWay', { type: 6 })"></i>
      </el-tooltip> -->

      <span style="color: white;font-size:18px;"
            class="cursor-pointer"
            @click="fullscreenHandle">
        <svg class="icon-svg"
             aria-hidden="true">
          <use xlink:href="#icon-fullscreen"></use>
        </svg>
      </span>
      <el-dropdown placement="bottom"
                   :show-timeout="0"
                   trigger="click">
        <span class="el-dropdown-link">
          <el-image :src="headUrl"
                    fit="cover"
                    class="portal-image">
            <img slot="error"
                 fit="cover"
                 src="~@/assets/mspbots/default_avatar.png"
                 style="max-width:30px;max-height:30px;" />
          </el-image>
        </span>
        <el-dropdown-menu slot="dropdown"
                          style="width:280px;">
          <div style="display: flex;height: 80px;border-bottom:0.5px solid #C0C0C0;">
            <div style="margin-left:16px;align-self:center;">
              <img :src="headUrl"
                   fit="cover"
                   style="width: 50px !important;height: 50px !important;max-width: 50px !important;max-height: 50px !important;border-radius: 100%;" />
            </div>
            <div style="margin-top: 16px;margin-left:16px;">
              <div style="display: flex;flex-direction:column;">
                <span>{{ realName }}</span>
                <span style="color: #8492a6;font-size: 13px;">{{this.$store.state.user.username}}</span>
                <el-tooltip :open-delay="1000"
                            effect="dark"
                            placement="bottom">
                  <div slot="content">{{getRole(this.$store.state.user.roleList)}}</div>
                  <div style="max-width:175px;color: #8492a6;font-size: 13px; word-break: break-word;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                    {{getRole(this.$store.state.user.roleList)}}
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
          <el-dropdown-item @click.native="resetPassword()">{{ $t('resetPassword') }}</el-dropdown-item>
          <el-dropdown-item @click.native="logoutHandle()"
                            style="color:#E02020;">{{ $t('logout') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog width="81vw"
               class="portal-setting"
               :visible.sync="poralDialog">
      <clientportal style="margin-top:10px;"
                    :portalStyle="'10px'"></clientportal>

    </el-dialog>
    <reset-password v-if="resetPasswordVisible"
                    ref="reset-password"></reset-password>
  </div>

</template>

<script>
import { clearLoginInfo, getUUID } from '@/utils'
import Cookies from 'js-cookie'
import screenfull from 'screenfull'
import clientportal from '@/views/modules/mspbots/client-portal/index'
import ResetPassword from './reset-password'
export default {
  props: {
    selectOptions: {
      type: String,
      default: function () {
        return ''
      }
    }
  },
  components: {
    clientportal, ResetPassword
  },
  data () {
    return {
      poralDialog: false,
      resetPasswordVisible: false
    }
  },
  computed: {
    hasSettingPermission () {
      let temp = true
      return temp
    },

    headUrl () {
      return this.$store.state.user.headUrl ? this.$store.state.user.headUrl : window.SITE_CONFIG['ossAddressURL'] + '/app/other/default_avatar.png'
    },
    realName () {
      if (this.$store.state.user.realName) {
        return this.$store.state.user.realName
      } else {
      }
    },
    loginSource () {
      let temp = false
      temp = !!(Cookies.get('loginSource') && Cookies.get('loginSource') === 'portal')
      return temp
    }

  },
  methods: {
    init () {

    },
    fullscreenHandle () {
      // this.$emit('fullscreenHandle')

      if (!screenfull.enabled) {
        return this.$message({
          message: this.$t('fullscreen.prompt'),
          type: 'warning',
          duration: 500
        })
      }

      screenfull.toggle()
    },
    goToHome () {
      this.$router.push({ name: 'home' })
    },
    getRole (roleList) {
      let arr = []
      if (roleList) {
        roleList.forEach(item => {
          arr.push(item.name)
        })
      }
      return arr.join(',')
    },
    isMe (data) {
      let temp = false
      if (data.tenantCode === this.$store.state.user.tenantCode) {
        temp = true
      }
      return temp
    },
    resetPassword () {
      var data = { id: this.$store.state.user.id, username: this.$store.state.user.username }
      this.resetPasswordVisible = true
      this.$nextTick(() => {
        this.$refs['reset-password'].dataForm.userId = data.id
        this.$refs['reset-password'].dataForm.username = data.username
        this.$refs['reset-password'].init()
      })
    },
    logoutHandle () {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$interface.system.userLogoutApi().then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          clearLoginInfo()
          this.$router.replace({ name: 'login' })
        }).catch(() => { })
      }).catch(() => { })
    },
    switchAccount (data) {
      if (data.tenantCode === this.$store.state.user.tenantCode) {
        return
      }
      this.$emit('load')
      const params = {
        switchUser: true,
        username: data.username,
        uuid: getUUID(),
        password: data.username,
        tenantCode: data.tenantCode
      }
      this.$interface.login.webLoginApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.setCookies(res.data)
          this.loginSuccess()
        }).catch(() => {
        })
    },
    setCookies (data) {
      Cookies.set('token', data.token, { sameSite: 'None', secure: true })
      Cookies.set('tenant_code', data.tenantCode, { sameSite: 'None', secure: true })
      sessionStorage.setItem('isMySelfCode', data.tenantCode)
      sessionStorage.setItem('isMySelfName', data.tenantName)
    },
    loginSuccess () {
      this.$interface.login.loginUserInfoApi().then(res => {
        if (res.data.code !== 0) {
          this.$store.commit('SET_API_LOAD_STATUS', false)
          return this.$message.error(res.data.msg)
        }
        this.$store.commit('SET_API_LOAD_STATUS', false)
        this.$store.commit('SET_LOGIN_USER_INFO', res.data.data)
        this.$store.state.contentTabs = window.SITE_CONFIG['routerWithForgetToken']
        window.location.reload()
        let path = window.location.pathname
        if (path.includes('Consulant')) {

        }
        if (path.includes('ClientPortal') || path.includes('portal')) {
          this.$router.replace({ path: '/portal' })
        }
      })
        .catch(() => {
          this.$store.commit('SET_API_LOAD_STATUS', false)
        })
    }
  }
}
</script>
<style lang="scss" >
.portal-layout {
  height: 100vh;
  &__header {
    height: 50px;
    padding: 0 15px;
    background-color: #000000;
    box-shadow: 0px 4px 12px -2px #00000069, inset 0px -1px 3px 0px #ffffff3d;
    &-right {
      &--icon {
        font-size: 18px;
        color: white;
        margin-left: 15px;
        margin-right: 10px;
      }
    }
  }
  .portal-image {
    max-width: 30px;
    max-height: 30px;
    width: 36px;
    height: auto;
    margin-right: 10px;
    margin-left: 15px;
    border-radius: 100%;
    vertical-align: middle;
  }
  .portal-setting {
    margin-top: -100px;
  }
}
.left-dropdown-layout {
  color: #ffffff;
  margin-left: 10px;
  position: relative;
  &-right {
    &--icon {
      font-size: 18px;
      color: #ffffff;
      margin-left: 16px;
    }
  }
}

.dropdown-bottom-list {
  height: 200px;
}
.dropdown-bottom-list .el-dropdown-menu__item {
  max-width: 95%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.el-dropdown-link {
  .portal-image {
    max-width: 30px;
    max-height: 30px;
    width: 36px;
    height: auto;
    margin-right: 10px;
    margin-left: 15px;
    border-radius: 100%;
    vertical-align: middle;
  }
}
</style>
